<template>
  <div style="background-color: #e4e4e5;">
    <nav-head></nav-head>
    <el-row style="background-color: aliceblue">
      <el-col :span="24">
        <el-row style="text-align: center">
          <el-col :span="18">
            <div style="margin-top: 15px;">
              <el-input placeholder="搜索职位/公司" v-model="input3" class="input-with-select" style="width: 600px;">
                <el-button slot="append" icon="el-icon-search"></el-button>
              </el-input>
              <table style="margin:30px auto;">
                <tr>
                  <th class="navbar-center-container">热门IT职业:</th>
                  <td class="navbar-center-container">java</td>
                  <td class="navbar-center-container">后端开发</td>
                  <td class="navbar-center-container">PHP</td>
                  <td class="navbar-center-container">IOS</td>
                  <td class="navbar-center-container">前端开发</td>
                </tr>
              </table>
            </div>
          </el-col>
          <el-col :span="3" style="border-right:1px solid #000">
            <div style="margin-top:15px;font-size: 30px;color: darkblue">31745</div>
            <div >职位数</div>
          </el-col>
          <el-col :span="3">
            <div style="margin-top:15px;font-size: 30px;color: darkblue">8576</div>
            <div>企业数</div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="8">
          <!--专业列表-->
      <!--<h3 v-for="a in classList" style="font-weight: bold;margin:30px 30px;"> {{a.name}}<span v-for="b in a.list" style="font-weight:normal;margin:30px 30px">{{b.name}}</span></h3>-->
        <table  style="margin:30px;background-color: #fff;border-radius: 10px;margin-left: 160px">
          <tr v-for="a in classList" style="padding-left: 90px;">
            <th style="font-weight: bold;padding-left: 20px;padding-top: 20px;padding-right: 10px;padding-bottom: 15px">{{a.name}}</th>
            <td v-for="b in a.list" style="padding-left: 20px;padding-top: 20px;padding-right: 10px;padding-bottom: 15px">{{b.name}}</td>
          </tr>
        </table>
      </el-col>
      <el-col :span="16">
        <div style="margin:30px;margin-left: 0px">
          <el-carousel :interval="5000" arrow="always" height="420px" style="width: 700px">
            <el-carousel-item v-for="item in 4" :key="item">
              <h3>{{ item }}</h3>
            </el-carousel-item>
          </el-carousel>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
    </el-row>
    <el-row>
      <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
    </el-row>
    <el-row>
      <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
    </el-row>
    <nav-footer></nav-footer>
  </div>
</template>

<script>
  import NavHead from './../components/NavHead'
  import NavFooter from './../components/NavFooter'
  import NavBread from './../components/NavBread'
  import Modal from './../components/Modal'
  import {currency} from './../util/currency'
  import axios from 'axios'
  const basePath = "http://127.0.0.1:9900/";
  export default {
    name: 'HelloWorld',
    data() {
      return {
        classList:[]

      }
    },
    methods: {



    },
    components:{
      NavHead,
      NavFooter,
      NavBread,
      Modal
    },
    mounted(){
      let $this=this
      axios({
        url:basePath+"getClassList",
        method:"get"
      }).then(res=>{
        console.log(res)
        $this.classList=res.data.obj
      })
    }
  }
</script>

<style scoped>
  .navbar-center-container {
    display: inline ;
    justify-content: flex-start;
    align-items: center;
    margin-right: 20px;
  }
  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>
